<template>
  <div>
    <fks-row :gutter="32">
      <fks-col :span="24">
        <fks-input
          v-model="loginForm.phone"
          class="login-input login-tel"
          :placeholder="LANG.PHONE_TIP"
          maxlength="11"
          oninput="value=value.replace(/[^\d]/g,'')"
        />
      </fks-col>
    </fks-row>
    <fks-row style="margin-top: 20px" :gutter="32">
      <fks-col :span="24" class="phone_code">
        <fks-input
          v-model="loginForm.captcha_code"
          class="login-input login-tel_code"
          type="text"
          maxlength="50"
          :placeholder="LANG.PHONE_CAPTCAH"
          @keyup.native.enter="handleLogin"
        >
          <fks-button
            slot="append"
            type="primary"
            :loading="smsLoading"
            class="getSms"
            @click="getSMSCaptcha"
          >
            <span v-if="countDown != -1 && countDown != -2" class="word">{{
              countDown + 's'
            }}</span>
            <span v-if="countDown != -1 || countDown != -2" class="word">{{
              countDown == -2 ? LANG.GET_CAPTCHA : LANG.REGAIN_CAPTCHA
            }}</span>
          </fks-button>
        </fks-input>
      </fks-col>
    </fks-row>
    <div style="min-height: 24px; margin-top: 20px; font-size: 14px">
      <div v-if="showRegister">
        <fks-button text style="cursor: pointer" @click="toRegister">
          {{ LANG.NO_ACCOUNT_TO_REGISTER }}
        </fks-button>
      </div>
    </div>
    <div class="login-button-container">
      <fks-button :loading="loading" type="primary" @click="handleLogin">
        {{ LANG.CLICK_LOGIN }}
      </fks-button>
    </div>
  </div>
</template>
<script>
import { GRANT_TYPE, openRegister } from '@/config'
import { getSMSCaptcha } from '../api'
import { uuid } from '@/utils/util'
export default {
  name: 'TelLogin',
  data() {
    return {
      showRegister: openRegister,
      countDown: -2,
      smsLoading: false,
      captcha_key: '',
      loginForm: {
        username: '',
        password: '',
        img_code: ''
      },
      loading: false
    }
  },
  methods: {
    //手机号验证规则
    testPhone(str) {
      const reg = /^1[3456789]\d{9}$/
      return reg.test(str)
    },
    //验证手机号
    vaildPhone() {
      if (!this.testPhone(this.loginForm.phone)) {
        return false
      } else {
        return true
      }
    },
    //进入注册页面
    toRegister() {
      this.$router.push('/register')
    },
    //登录操作
    handleLogin() {
      let loginData = this.getLoginForm()
      if (loginData.captcha_code && loginData.username) {
        this.loading = true
        this.$store
          .dispatch('userLogin', loginData)
          .then((res) => {
            this.loading = false
            this.redirectTo()
            this.$storage.set('depthId', uuid(16, 32))
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.errorTip(loginData)
      }
    },
    //为输入全手机号与验证码时的提示
    errorTip(loginData) {
      if (loginData.captcha_code) {
        this.$message.error(this.LANG.PHONE_TIP)
      }
      if (loginData.username) {
        this.$message.error(this.LANG.PHONE_CAPTCAH)
      }
      if (!loginData.username && !loginData.captcha_code) {
        this.$message.error(this.LANG.ENTER_PHONE_CAPTCAH)
      }
    },
    //处理登录数据
    getLoginForm() {
      let form = {}
      form.grant_type = GRANT_TYPE.sms_captcha.code
      form.username = this.loginForm.phone
      form.captcha_code = this.loginForm.captcha_code
      form.captcha_key = this.captcha_key
      return form
    },
    //获取短信验证码
    getSMSCaptcha() {
      if (this.countDown < 0 && this.loginForm.phone) {
        if (!this.vaildPhone()) {
          return this.$message.warning(this.LANG.FORMAT_ERROR)
        }
        this.smsLoading = true
        getSMSCaptcha({ phone: this.loginForm.phone })
          .then((res) => {
            this.smsLoading = false
            if (res.status) {
              this.captcha_key = res.data
              this.updataCountDown()
            }
          })
          .catch((err) => {
            this.$message.error(err.response.data.message)
            // this.$message.error(this.LANG.PHONE_UNREGISTER)
            this.updataCountDown()
          })
      } else {
        if (this.countDown < 0) {
          this.$message.warning(this.LANG.PHONE_NOT_EMPTY)
        }
      }
    },
    //更新获取短信验证码的时间
    updataCountDown() {
      this.smsLoading = false
      this.countDown = 60
      const count = setInterval(() => {
        if (this.countDown == 0) {
          clearInterval(count)
          this.countDown = -1
        } else {
          this.countDown--
        }
      }, 1000)
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .phone_code {
  .fks-input-group__append {
    width: 100px;
    border: none;
    border-bottom: 1px solid rgba(225, 226, 228, 1);
    border-radius: 0;
    text-align: center;
    background: rgba(255, 255, 255, 0);

    button {
      padding-right: 0;
      font-size: 14px;
    }
  }
}

::v-deep .login-tel {
  .fks-input__inner {
    background: url('../../../assets/img/login/login-tel.png') no-repeat 5px
      center;
  }
}

::v-deep .login-tel_code {
  .fks-input__inner {
    background: url('../../../assets/img/login/login-tel_code.png') no-repeat
      5px center;
  }
}

.login-button-container {
  margin-top: 48px;

  ::v-deep .fks-button {
    display: block;
    width: 100%;
    height: 55px;
    font-size: 18px;
  }
}
</style>